<template>
  <div>
    <group>
      <msg
        title="请选择工种"
        description="因为您购买了多个工种的做题卡<br>请您选择做哪个工种的练习题。"
      >
      <!-- <template slot="buttons" v-for="item in UserCardandWorkName" class="spaceTB">
        <cell :title="item.workName" :link="{name:'GetExercises',params:{workid: item.workType}}" :key="item.id"></cell>
      </template> -->
      <template slot="buttons" v-for="item in MyWorkType" class="spaceTB">
        <cell :title="item.value" :link="{name:'GetExercises',params:{workid: item.key}}" :key="item.key"></cell>
      </template>
      </msg>
      <!-- <x-button type="primary" @click.native="MyWorkType">测试</x-button> -->
    </group>
  </div>
</template>

<script>

import { Group, Cell, Msg, XButton } from 'vux'
import { mapGetters, mapActions } from 'vuex'
export default {
  components: {
    Group,
    Cell,
    Msg,
    XButton
  },
  data () {
    return {

    }
  },
  mounted () {
    // console.log(this.$store.state.userAllCardInfo)
    // console.log(this.$store.state.userAllCardInfo.length)
    this.$http.get(this.$store.state.vxUsercardAllCardInfo).then((res) => {
      console.log('测试无卡多卡问题')
      console.log(res)
      if (res.data.code === 0) {
        var cardList = res.data.userCardList
        if (cardList.length === 1) {
          this.$router.push({name: 'GetExercises', params: { workid: cardList[0].workType }})
        }
      } else {
        this.$router.push({name: 'CardPayment'})
      }
    })
    // if (this.$store.state.userAllCardInfo.length === 1) {
    //   // 如果只有一个工种可用，则直接跳过选择工种的界面
    //   // console.log(this.$store.state.userAllCardInfo[0].workType)
    //   this.$router.push({name: 'GetExercises', params: { workid: this.$store.state.userAllCardInfo[0].workType }})
    // } else if (this.$store.state.userAllCardInfo.length === 0) {
    //   // 如果没有可用工种的卡，则跳到购卡的界面
    //   this.$router.push({name: 'CardPayment'})
    // }
    // 其余的情况需要选择工种
  },

  computed: {
    ...mapGetters(['workTypeVK', 'UserAllCardwithWorkName']),

    // 显示用户卡（废弃）
    // UserCardandWorkName: function () {
    //   var userAllCards = this.$store.state.userAllCardInfo
    //   var workTypeVK = this.workTypeVK
    //   for (var i = 0; i < userAllCards.length; i++) {
    //     for (var j = 0; j < workTypeVK.length; j++) {
    //       if (userAllCards[i].workType === workTypeVK[j].key) {
    //         userAllCards[i].workName = workTypeVK[j].value
    //       }
    //     }
    //   }
    //   return userAllCards
    // },
    // 显示用户拥有卡的工种，不再显示卡
    MyWorkType: function () {
      var userAllCards = JSON.stringify(this.$store.state.userAllCardInfo)
      console.log(userAllCards)
      var workTypeVK = this.workTypeVK
      console.log(workTypeVK)
      var mywork = []
      for (var j = 0; j < workTypeVK.length; j++) {
        if (userAllCards.indexOf(workTypeVK[j].key) > 0) {
          mywork.push({key: workTypeVK[j].key, value: workTypeVK[j].value})
        }
      }
      return mywork
    }

  },
  methods: {
    // 映射action的方法，作为method
    // homeInit：初始化Home页面所需的数据
    ...mapActions(['selectUserCardInit'])

  },
  created () {
    // this.$nextTick(() => {
    //   this.selectUserCardInit()
    // })
    this.selectUserCardInit()
  }
}
</script>

<style scoped>
.spaceTB{
  margin-bottom: 20px;
  margin-top: 20px;
}
</style>
